/*
 * @Date: 2022-01-03 16:01:43
 * @LastEditors: xiaole
 * @LastEditTime: 2022-01-04 20:30:17
 */
import React, { useEffect, useState } from "react";
import { Layout, Menu } from "antd";
import { UserOutlined, HomeOutlined, CrownOutlined } from "@ant-design/icons";
import { withRouter } from "react-router-dom";
import axios from "axios";
import "./SideMenu.css";

const { Sider } = Layout;
const { SubMenu } = Menu;

function SideMenu(props) {
  const [menu, setMenu] = useState([]);
  useEffect(() => {
    axios.get("http://localhost:9925/rights?_embed=children").then((res) => {
      console.log(res.data);
      setMenu(res.data);
    });
  }, []);

  const isPermission = (item) => {
    return item?.pagepermission === 1;
  };
  const renderMenu = (menuList) => {
    return menuList.map((item) => {
      if (item.children && item.children.length) {
        return (
          <SubMenu key={item.key} title={item.title}>
            {renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item
          key={item.key}
          onClick={() => {
              props.history.push(item.key);
          }}
        >
          {item.title}
        </Menu.Item>
      );
    });
  };

  const routeKey = props.location.pathname;
  const activeKey = `/${props.location.pathname.split("/")[1]}`;
  console.log(routeKey,activeKey)
  return (
    <Sider trigger={null}>
      <div className="slider-wrapper">
        <div className="logo" />
        <div className="Menu-box">
          <Menu theme="light" mode="inline" defaultOpenKeys={[activeKey]} defaultSelectedKeys={[routeKey]} >
            {renderMenu(menu)}
          </Menu>
          {/* defaultOpenKeys={activeKey} defaultSelectedKeys={routeKey} */}
          {/* <Menu  mode="inline">
            <Menu.Item>菜单项</Menu.Item>
            <SubMenu title="子菜单">
              <Menu.Item>子菜单项</Menu.Item>
            </SubMenu>
          </Menu> */}
        </div>
      </div>
    </Sider>
  );
}

export default withRouter(SideMenu);
